<template>
	<view class="center">
		<xbd-page-card>
			<template>
				<xbd-image-title title="待上报" :image="require('@/static/image/supervision/wait.png')"></xbd-image-title>
				<view class="card" @click="clickDetail(item._id)" v-for="(item,index) in waitList" :key="index">
					<view class="">
						<view class="title">
							<view class="name">
								{{item.name}}
							</view>
							<view class="back" v-if="item.state==='break'">
								已退回
							</view>
						</view>
						<view>
							<text>截止</text>
							<text
								:class="['time', ( timeFormat(item.end_time) < nowDate)  ? 'color':'' ]">{{ item.end_time  | timeFormat('YYYY-MM-DD HH:mm')}}</text>
						</view>
					</view>
				</view>
				<xbd-null-list v-if="!waitList.length"></xbd-null-list>
			</template>
		</xbd-page-card>
		<xbd-page-card>
			<template>
				<xbd-image-title title="已上报" :image="require('@/static/image/supervision/already.png')">
					<template>
						<view class="box-right">
							<xbd-date-pick fields="day" :date="date" :visible.sync="visible" @setDate="setDate">
								<template>
									<view class="date" @click="visible = true">
										<text>{{ date }}</text>
										<image class="date-img" src="@/static/image/down.svg"></image>
									</view>
								</template>
							</xbd-date-pick>
						</view>
					</template>
				</xbd-image-title>
				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholderStyle="font-size:30rpx"
					placeholder="搜索内容" @iconClick="iconClick"></uni-easyinput>

				<uni-list :border="false">

					<view class="card" @click="clickDetail(item._id)" v-for="(item,index) in showList" :key="index">
						<view class="left">
							<view class="title">
								<view class="name">
									{{item.name}}
								</view>
							</view>
							<view>
								<text>上传 {{ item.report_time  | timeFormat('YYYY-MM-DD HH:mm')}}</text>
								<text v-if="(item.report_time > item.end_time)" class="timeout">超时</text>
							</view>

						</view>
						<view class="right">
							<image v-if="item.state === 'refused'" src="@/static/image/supervision/refused.png" mode="">
							</image>
							<image v-else-if="item.state === 'successed'" src="@/static/image/supervision/pass.png"
								mode=""></image>
						</view>
					</view>
					<xbd-null-list v-if="!showList.length"></xbd-null-list>
					<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
					</xbd-loading-more>
				</uni-list>
			</template>
		</xbd-page-card>

	</view>
</template>

<script>
	import {
		Mission
	} from '@/api/index.js';
	const dayjs = require("dayjs");
	export default {
		data() {
			const nowDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
			return {
				visible: false,
				date: '日期选择',
				statusNum: 0,
				isLoadMore: false,
				nowDate: nowDate,
				value: '',
				showList: [],
				waitList: [],
				show: false,
				info: {
					page: 1,
					perpage: 10000,
					type: 'wait',
				},
				endInfo: {
					page: 1,
					perpage: 10,
					type: 'end',
					time: '',
					keyword: ''

				}
			};
		},
		methods: {
			timeFormat(time) {
				return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			},
			// 加载更多
			loadmore() {
				this.endInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Mission.getReportList(this.endInfo)
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.endInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.endInfo.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.endInfo.page--;
				}
			},
			iconClick() {
				console.log('就是玩')
				this.endInfo.page = 1;
				this.endInfo.keyword = this.value
				this.showList = []
				this.statusNum= 0
				this.getEndList()
			},
			setDate(date) {
				this.date = date;
				console.log('确定')
				this.endInfo.page = 1;
				this.endInfo.time = date
				this.showList = []
				this.statusNum= 0
				this.getEndList()
			},

			clickDetail(val) {
				uni.navigateTo({
					url: `/pages/mission/activity/detail?id=${val}`,
				});

			},
			async getWaitList() {

				const res = await Mission.getReportList(this.info)
				this.waitList = res.data.list
				console.log(res, 'res1')
				console.log(this.nowDate)
			},
			async getEndList() {
				const res = await Mission.getReportList(this.endInfo)
				if (res.data.list.length === this.endInfo.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = res.data.list
				console.log(res, 'res2')
			},
		},
		async onShow() {
			this.endInfo.page = 1;
			uni.pageScrollTo({
				scrollTop: 0,
			});
			await this.getWaitList()
			await this.getEndList()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	.center {
		padding: 32rpx;

		.card {
			display: flex;
			padding: 40rpx 0;
			border-bottom: 2rpx dashed #E5E5E5;
			font-size: 26rpx;
			color: #A0A7B8;

			.right {
				image {
					width: 100rpx;
					height: 88rpx;
				}
			}

			.left {
				flex: 1;
			}

			.title {
				display: flex;
				color: #000623;
				font-size: 30rpx;
				margin-bottom: 20rpx;

				.name {
					max-width: 500rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.back {
					color: #FFFFFF;
					padding: 3rpx 6rpx;
					margin-left: 30rpx;
					background-color: #FC4F4F;
					font-size: 22rpx;
					border-radius: 6rpx;
				}
			}

			.time {
				margin-left: 20rpx;

				&.color {
					color: #FC4F4F !important;
				}
			}

			.timeout {
				padding: 3rpx 6rpx;
				margin-left: 30rpx;
				background: rgba(252, 185, 79, 0.15);
				color: #FCB94F;
			}

			&:nth-last-child(1) {
				border-bottom: none;
			}
		}
	}

	.date {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 220rpx;
		height: 56rpx;
		border: 2rpx solid #A0A7B8;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
		color: #999;

		.date-img {
			width: 34rpx !important;
			height: 34rpx !important;
			margin: 0 !important;
			transform: rotate(90deg)
		}
	}
</style>
